<template>
  <div class="order">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            clearable
            v-model="queryInfo.query"
            @clear="getOrderList"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="
                getOrderList
              "
            ></el-button>
          </el-input>
        </el-col>
      </el-row>

      <el-table :data="orderlist" stripe border style="width: 100%">
        <el-table-column type="index"> </el-table-column>
        <el-table-column prop="id" label="订单编号"></el-table-column>
<!--        <el-table-column prop="orderItems.commodity.cname" label="商品名称"></el-table-column>-->
        <el-table-column prop="total" label="订单价格"></el-table-column>
        <el-table-column prop="mobile" label="手机号"></el-table-column>
        <el-table-column prop="address" label="收货地址"></el-table-column>
        <el-table-column prop="status" label="订单状态"></el-table-column>
        <el-table-column label="创建时间">
          <template v-slot="scope">
            {{ scope.row.createTime | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="130px">
          <template v-slot="scope">
            <el-button
                    size="mini"
                    type="warning"
                    icon="el-icon-location"
                    @click="showBox(scope.row)"
            ></el-button>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="showProgressBox(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 15, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </el-card>

    <!--修改地址对话框-->
    <el-dialog title="修改地址" :visible.sync="addressVisible" width="50%">
      <el-form
        ref="addressFormRef"
        :model="addressForm"
        :rules="addressFormRules"
        @close="addressDialogClosed"
        label-width="100px"
      >
        <el-form-item label="省市区/县" prop="address1">
          <el-cascader :options="options" size="small" v-model="addressForm.address1">
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address2">
          <el-input v-model="addressForm.address2" placeholder=""></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addressVisible = false">取 消</el-button>
        <el-button type="primary" @click="editAdress"
          >确 定</el-button
        >
      </div>
    </el-dialog>

<!--    弹出框有问题-->
    <el-dialog
      title="修改订单为以下状态"
      :visible.sync="progressVisible"
      width="50%">
      <el-form
              ref="statusFormRef"
              :model="statusForm"
      >
        <el-form-item label="" prop="">
          <el-input v-model="status" placeholder="" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="progressVisible = false">取 消</el-button>
        <el-button type="primary" @click="editStatus">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import cityDate from "./citydata.js";
import citJason from './city_code.json';

export default {
  data() {
    return {
      statusForm: {
        status: ""
      },
      status: "",
      row: {},
      options:[],
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 5
      },
      orderlist: [],
      total: 0,
      addressVisible: false,
      addressForm: {
        address1: [],
        address2: ''
      },
      addressFormRules: {
        address1: [
          { required: true, message: "请选择省市区/县", trigger: "blur" }
        ],
        address2: [
          { required: true, message: "请输入详细地址", trigger: "blur" }
        ]
      },
      cityDate,
      progressVisible:false,
      progressInfo:[]
    };
  },
  methods: {
    //获取订单列表
    async getOrderList() {
      const { data:res } = await this.$http.get("morder/findByParams",{
        params: this.queryInfo
      });
      console.log(res);
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg);
      }
      this.orderlist = res.data.data;
      this.total = res.data.totalElement;
      console.log(res.data.data);

    },
    editDialogClosed() {
      this.$refs.addressFormRef.resetFields();
    },
    //修改订单的地址
   editAdress(){
      this.$refs.addressFormRef.validate(async valid => {
        if (!valid) return;
        //转换字符串
        this.row.province = JSON.stringify(this.addressForm.address1)
        this.row.address=this.addressForm.address2
        console.log(this.row);
        //发起请求
        const {data:res} = await this.$http.put('morder/update',this.row);
        if (res.meta.status !== 200) {
          return this.$message.error("修改订单地址失败！");
        }
        this.$message.success("修改成功！");
        this.addressVisible = false;
        this.getOrderList();
      });
    },
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.getOrderList();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.getOrderList();
    },
    //在弹框中显示地址
    showBox(row) {
      this.addressVisible = true;
      console.log(row.province);
      this.addressForm.address1 = JSON.parse(row.province);
      this.addressForm.address2 = row.address;
      this.row = row
    },
    //监听修改地址的对话框的关闭事件
    addressDialogClosed() {
      this.$refs.addressFormRef.resetFields();
    },
    //在弹框中显示地址订单状态
    showProgressBox(row) {
      if(row.status == "已完成"){
        this.progressVisible = false
        this.$message.error("该订单已经完成")
        return ;
      }
      //状态显示弹框
      this.progressVisible = true

      if(row.status == "已支付"){
        this.status = "已发货"
      }
      console.log(status);

      if(row.status == "已发货"){
        this.status = "已完成"

      }
      this.row = row
      console.log(this.row);
      // console.log(this.status);
      console.log(typeof (this.statusForm.status) == 'string');
    },
    //修改状态的方法
    editStatus(){
      this.$refs.statusFormRef.validate(async valid => {
        if (!valid) return;
        console.log(this.row);
        this.row.status=this.status
        console.log(this.row);
        //发起请求
        const {data:res} = await this.$http.put('morder/update',this.row);
        if (res.meta.status !== 200) {
          return this.$message.error("修改订单地址失败！");
        }
        this.$message.success("修改成功！");
        this.progressVisible = false;
        this.getOrderList();
      });
    }
  },
  created() {
    this.options = citJason
    this.getOrderList();
  }
};
</script>

<style lang="less" scoped>
  .order{
    .el-popper el-cascader__dropdown{
      z-index: 2009;
      position: absolute !important;
      top: 350px;
      left: 337px;
    }
  }

.el-cascader {
  width: 100%;

}
</style>
